<template>
    <div class='edit_info' v-if="editTemplates">
      <!--baseInfo-->
      <div v-if="baseData" class="base_info_content  clearfix">
        <div v-if="editTemplates.mainTemplateId!='comp_person_base_info'" class="item_title">{{baseData.data[0][baseData.columnEdit[0].name]}} <span v-if="baseData.isEditAble" class="edit iconfont r"  @click="editItem('update',editTemplates.mainTemplateId,baseData.columnEdit,baseData.data[0])">&#xe607;</span></div>
        <div>
          <div class="img_content" v-if="editTemplates.mainTemplateId=='comp_person_base_info'" @click="uploadHeader">
            <img v-if="baseData.data[0]['head_img']" :src="baseData.filePrefix+'/'+baseData.data[0]['head_img']">
            <span v-if="!baseData.data[0]['head_img']">{{baseData.data[0]['person_name']}}</span>
            <span class="iconfont edit_header_icon">&#xe607;</span>
          </div>
          <div class="base_group_line" v-for="(value,key) in (baseData.columnEdit)" v-if="value.isEditShow">
            <div class="key">{{value.title}}:</div>
            <div class="value">{{baseData.data[0][value.name]}}</div>
          </div>
        </div>
      </div>

      <!--tab_content-->
      <div class="tab_panel" v-if="editTemplates">
        <ul class="tab_list">
          <li v-touch-ripple  class="tab_item"  v-for="(value,key) in editTemplates.tabNames" :class="{'active':key==activeIndex}" @click="changeTab(key)" >
            {{value}}
          </li>
        </ul>
        <div class="tab_content">
          <template v-if="templateNames&&tabContentData">

            <div class="tab_content_item animated fadeIn"   v-for = "(value,key) in templateNames[activeIndex]" track-by="key">

              <template v-if="templateIds[activeIndex][key] == 'comp_person_work_status'">

                <div class="person_status" v-if="statusRecord&&statusRecord.length">
                  <div class="person_status_item">Employee Id: {{editId}}</div>
                  <div class="person_status_item edit">
                    Employee Status&nbsp;&nbsp;:&nbsp;&nbsp;{{statusRecord[0].person_status}}
                    <span class="edit_icon">
                       <span v-touch-ripple class="iconfont" @click="editItem('add',templateIds[activeIndex][key],tabContentData[key].columnEdit,tabContentData[key].data[0])">&#xe607;</span>
                       <span v-touch-ripple class="iconfont" @click="showStatusTable=true">&#xe616;</span>
                    </span>
                  </div>
                </div>
              </template>

              <template v-if="templateIds[activeIndex][key] == 'comp_person_work_type'">
                <div class="person_status" v-if="typeRecord&&typeRecord.length">
                  <div class="person_status_item edit">Employee Type&nbsp;&nbsp;:&nbsp;&nbsp;{{typeRecord[0].person_type}}
                    <span class="edit_icon">
                       <span v-touch-ripple class="iconfont" @click="editItem('add',templateIds[activeIndex][key],tabContentData[key].columnEdit,tabContentData[key].data[0])">&#xe607;</span>
                       <span v-touch-ripple class="iconfont" @click="showTypeTable=true">&#xe616;</span>
                    </span>
                  </div>
                  <div class="person_status_item">Original Start&nbsp;&nbsp;:&nbsp;&nbsp;{{originalAndLastDate[0].original_date}}</div>
                  <div class="person_status_item">Last Start Date&nbsp;&nbsp;:&nbsp;&nbsp;{{originalAndLastDate[0].last_date}}</div>
                </div>
              </template>
              <template v-if="tabContentData[key].showMode=='0'">
                <div class="item_title" :class="{border0:tabContentData.length<2}">
                  <span class="title_name"  v-if = "value&&tabContentData.length>1">{{value}}</span>
                  <span v-if="tabContentData[key].specialTabType == 1" class="edit iconfont r"  @click="addUpload">&#xe609;</span>
                  <span v-if="templateIds[activeIndex][key] == 'comp_person_relation'" class="edit iconfont r"  @click="editItem('add',templateIds[activeIndex][key],tabContentData[key].columnEdit,null)">&#xe609;</span>
                </div>
                <div class="item_content" >
                  <div class="show_mode_table">
                    <!--table 列表-->
                    <el-table  v-show="tabTableData[templateIds[activeIndex][key]]" :data="tabTableData[templateIds[activeIndex][key]]" border emptyText="no data" style="width: 100%" :height="360">
                      <!--序列号-->
                      <el-table-column type="index" label="Id" width="50"></el-table-column>
                      <!--附件增加删除下载-->
                      <el-table-column v-if="tabContentData[key].specialTabType=='1'" inline-template :context="_self" label="hander" width="100">
                        <span>
                          <span class="iconfont table_handle_icon" title="download" @click="downloadAttachment(templateIds[activeIndex][key],row.file_real_name,row.file_url)">&#xe6c8;</span>
                          <span class="iconfont table_handle_icon" title="delete" @click="showDelModal(templateIds[activeIndex][key],row.uuid,'table')">&#xe60d;</span>
                        </span>
                      </el-table-column>
                      <!--紧急联系人添加删除更新-->
                      <el-table-column v-if="templateIds[activeIndex][key] == 'comp_person_relation'" inline-template :context="_self" label="hander" width="100">
                        <span>
                           <span class="iconfont table_handle_icon" title="edit"  @click="editItem('update',templateIds[activeIndex][key],tabContentData[key].columnEdit,row)">&#xe607;</span>
                          <span class="iconfont table_handle_icon" title="delete" @click="showDelModal(templateIds[activeIndex][key],row.uuid,'table')">&#xe60d;</span>
                        </span>
                      </el-table-column>

                      <!--头像列-->
                      <template v-for="(value,key) in tabTableColumns[templateIds[activeIndex][key]]" v-if="value.isListShow && !value.isHidden">
                        <el-table-column v-if="value.name == 'head_img'" :show-overflow-tooltip = 'true' :prop="value.name" :label="value.title" :align='"center"' :sortable = "value.isSortable ? 'custom':false" inline-template >
                          <div>
                            <img class="table_head_img" :src="metaDataTableColumnObj.filePrefix+'/'+row.head_img ">
                          </div>
                        </el-table-column>
                        <!--其他列-->
                        <el-table-column v-else :show-overflow-tooltip = 'true' :prop="value.name" :label="value.title" :sortable = "value.isSortable ? 'custom':false" ></el-table-column>
                      </template>
                    </el-table>

                    <!--分页-->
                    <div    @click="setCurrentTableId(templateIds[activeIndex][key])"  v-show="tabTablePageData[templateIds[activeIndex][key]]" style="text-align:right;margin-top:10px" v-if="tabTablePageData[templateIds[activeIndex][key]]&&tabTablePageData[templateIds[activeIndex][key]].pageDataCount>1">
                      <el-pagination
                        @current-change="tableChangePage"
                        :current-page="parseInt(tabTablePageData[templateIds[activeIndex][key]].pageNo)"
                        :page-size="parseInt(tabTablePageData[templateIds[activeIndex][key]].pageSize)"
                        layout="total, prev, pager, next, jumper"
                        :total="parseInt(tabTablePageData[templateIds[activeIndex][key]].pageDataCount)">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </template>

              <template v-if="tabContentData[key].showMode=='1'">
                <div class="item_title"  :class="{border0:tabContentData.length<2}">
                  <span class="title_name"  v-if = "value&&tabContentData.length>1">{{value}}</span>
                  <span v-if="!tabContentData[key].data || tabContentData[key].data.length==0" class="edit iconfont r"  @click="editItem('add',templateIds[activeIndex][key],tabContentData[key].columnEdit,tabContentData[key].data[0])">&#xe609;</span>
                  <span v-else class="edit iconfont r"  @click="editItem('update',templateIds[activeIndex][key],tabContentData[key].columnEdit,tabContentData[key].data[0])">&#xe607;</span>
                </div>
                <div class="item_content">
                  <div class="show_mode_list clearfix">
                    <div class="list_line" v-for="(value2,key2) in tabContentData[key].columnEdit" v-if = "value2.isEditShow" >
                      <div class="key">{{value2.title}}</div>
                      <div class="value" v-if="tabContentData[key].data && tabContentData[key].data.length>0">{{tabContentData[key].data[0][value2.name]}}</div>
                    </div>
                  </div>
                </div>
              </template>

              <template v-if="tabContentData[key].showMode=='2'">
                <div class="item_title"  :class="{border0:tabContentData.length<2}">
                  <span class="title_name"  v-if = "value&&tabContentData.length>1">{{value}}</span>
                  <span class="edit iconfont r"  @click="editItem('add',templateIds[activeIndex][key],tabContentData[key].columnEdit,tabContentData[key].data[0])">&#xe609;</span>
                </div>
                <div class="item_content" >
                  <div class="show_mode_express">
                    <div class="show_mode_express_item" v-for = "(value3,key3) in tabContentData[key].expression" track-by="key3">
                      <template v-if="!tabContentData[key].data[key3].time">
                        <span v-html="value3"></span>

                      </template>
                      <template v-if="tabContentData[key].data[key3].time">
                        <span v-html="value3 + tabContentData[key].data[key3].time"></span>
                      </template>
                      <div class="edit_btn_group" v-if="tabContentData[key].specialTabType == 0">
                        <span class="iconfont r" @click="showDelModal(templateIds[activeIndex][key],tabContentData[key].data[key3].uuid)">&#xe60d;</span>
                        <span class="iconfont r" @click="editItem('update',templateIds[activeIndex][key],tabContentData[key].columnEdit,tabContentData[key].data[key3])">&#xe607;</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <template v-if="tabContentData[key].showMode=='3'">
              </template>
              <template v-if="tabContentData[key].showMode=='4'">
              </template>
              <template v-if="tabContentData[key].showMode=='5'">
              </template>
              <template v-if="tabContentData[key].showMode=='6'">
              </template>
            </div>
          </template>
          <template v-if="!(templateNames&&tabContentData)">
            <div class="spin"><d-spin></d-spin></div>
          </template>
        </div>
      </div>


      <d-Modal v-if="formModal" @close="formModal=false">
        <span slot="header">Edit</span>
        <div slot="body">
          <d-form :formOption='formOption' @close="formModal=false" @update = "updateTab"></d-form>
        </div>
        <div class="btn_group" slot="footer">
        </div>
      </d-Modal>

     <d-Modal v-show="showTypeTable" @close="showTypeTable=false" width='700px'>
        <span slot="header">Employee Type Record</span>
        <div slot="body" style="padding:12px">
          <table class="modal_table">
            <tr>
              <th>Type</th><th>Effective Date</th><th>Description</th>
            </tr>
            <tr v-for="(value,key) in typeRecord">
              <td>{{value['person_type']}}</td>
              <td>{{value['date_from_type']}}</td>
              <td>{{value['remark_type']}}</td>
            </tr>
          </table>
        </div>
        <div class="btn_group" slot="footer">
        </div>
      </d-Modal>


      <d-Modal v-show="showStatusTable" @close="showStatusTable=false" width='700px'>
        <span slot="header">Employee Status Record</span>
        <div slot="body" style="padding:12px">
          <table class="modal_table">
            <tr>
              <th>Status</th><th>Effective Date</th><th>Description</th>
            </tr>
            <tr v-for="(value,key) in statusRecord">
              <td>{{value['person_status']}}</td>
              <td>{{value['date_from']}}</td>
              <td>{{value['remark']}}</td>
            </tr>
          </table>
        </div>
        <div class="btn_group" slot="footer">
        </div>
      </d-Modal>

     <d-Modal v-if="uploadModal" @close="uploadModal=false" width='400px'>
        <span slot="header">upload Attachment</span>
        <div slot="body" class="upLoad_panel">
          <el-upload style="width:100%"
            action="/route/comp_org_list/uploadAttachment.do"
            type="drag"
            :multiple="true"
            :data="uploadAttachmentData"
            :on-preview="uploadAttachmentPreview"
            :on-remove="uploadAttachmentRemove"
            :on-success="uploadAttachmentSuccess"
            :on-error="uploadAttachmentError"
          >
            <i class="el-icon-upload"></i>
            <div class="el-dragger__text">Drag the file here, or <em> Click to upload </em></div>
            <div class="el-upload__tip" slot="tip"> only upload not more than 500kb</div>
          </el-upload>
        </div>
        <div class="btn_group" slot="footer">
        </div>
      </d-Modal>
      <d-Modal v-if="showImgCropper" @close="showImgCropper = false">
        <span slot="header">image Cropper</span>
        <div slot="body" class="upLoad_panel">
          <d-img-cropper :options="headerCropperOption" @close="showImgCropper = false" @cropper-success="uploadHeaderSuccess"></d-img-cropper>
        </div>
      </d-Modal>
    </div>
</template>

<script>
  import {API_ROOT} from '../../config'
  import dForm from './Form.vue'
  import dModal from './Modal.vue'
  import dSpin from './Spin.vue'
  import dImgCropper from './ImgCropper.vue'
  export default{
    name:'edit',
    components:{
      dForm,
      dModal,
      dSpin,
      dImgCropper
    },
    created:function(){
      var t = this;
      var option = t.editOption;
      t.editTemplates = option.editTemplates;
      t.editId = option.editId;
      t.tabRouteIndex  = option.index || null;
      t.navigationCondition = option.navigationCondition;
      t.editCondition = option.editCondition;
      this.init()
    },
    mounted:function(){
      this.$nextTick(function(){
      });
    },
    computed:{
      "templateNames"(){
        return this.editTemplates.templateNames.map(function (value) {
            return value.split(',');
          });
      },
      "templateIds"(){
        return this.editTemplates.templateIds.map(function (value) {
            return value.split(',');
        });
      }
    },
    watch:{

    },
    data:function () {
      return{
        showImgCropper:false,
        editTemplates:null,
        tabRouteIndex:null,
        navigationCondition:null,
        editCondition:null,          editId:null,
        baseData:null,
        tabContentData:null,
        uploadAttachmentData:null,
        currentTableId:null,

        activeIndex:0,
        templateNames:null,
        templateIds:null,

        //table
        tabTableColumns:{},
        tabTableColumnsShow:null,
        tabTableDataObj:{},
        tabTableData:{},
        tabTablePageData:{},
        postData:{
        },
        defaultPageBean:{pageNo: "1", pageSize: '6'},
        formModal:false,//表单弹出框
        //表单传参
        formOption:{
          formData:null, //form需要的数据
          formType:null, //add or update
          formInfoSetId:null, //form 的infoSetId
          navigationCondition:null
        },
        headerCropperOption:{},//修改剪辑头像

        showDelete:false,
        deleteOption:null,

        deleteParam:null,

        uploadModal:false,
        upLoadFileList:[],

        //特殊数据
        originalAndLastDate:null,
        typeRecord:null,
        statusRecord:null,
        showTable:false,
        tableColumn:null,
        tableData:null,
        tableTitle:"",
        showTypeTable:false,
        showStatusTable:false,
      }
    },
    methods: {
      init:function () {
        this.initBaseInfo();
        var index = 0;
        //跳转到某个页签
        if(this.tabRouteIndex&&this.tabRouteIndex){
             var tabList = this.editTemplates.tabNames.map(function(value){
             return value.replace(/\s+/g,"").toLowerCase();
          });
          index =  tabList.indexOf(this.tabRouteIndex.toLowerCase()) > -1 ? index : 0;
        }
        this.changeTab(index);
      },
      changeTab:function (index,flag) {
        var t = this;
        if(!flag){
          t.tabContentData =null;
        }
        t.activeIndex = index;

        t.$store.dispatch('getEditDataAndColumn',
          {
            param:{
              infoSetId:t.editTemplates.templateIds[index],
              editCondition:{key:t.editTemplates.editConditionKey,value:t.editId}
            },
            success:(data)=>{
                data = data.beans;
                t.tabContentData=data;
                if(data.length == 1 && data[0].showMode == '0'){
                  var postData = {infoSetId:t.editTemplates.templateIds[index],editCondition:{key:t.editTemplates.editConditionKey,value:t.editId}}
                    postData.pageBean = t.defaultPageBean;
                  //如果是附件
                  if(data[0].specialTabType == '1'){
                    postData.editCondition = {key: "code_id",value:t.editId};
                    postData.navigationCondition = {key: "code_set_id", value: data[0].specialTabParam};


                    t.uploadAttachmentData = {
                      codeId: t.editId,
                      codeSetId: data[0].specialTabParam,
                      infoSetId: t.editTemplates.templateIds[index]
                    }
                  }
                  setTimeout(function () {
                    t.$set(t.tabTableColumns,postData.infoSetId,data[0].columnEdit);
                    t.$set(t.postData,postData.infoSetId,postData);
                    t.getTableData(postData);
                  },100);
                }
            }
          }
         );
        //员工详情  job_info 特殊处理

        if(t.editTemplates.templateIds[index].indexOf('comp_person_work_status')>-1){
          t.$store.dispatch("getEmployeeOriginalAndLastDate",{param:{customParam:{person_id:t.editId}},success:function(data){
            t.originalAndLastDate = data.maps;
          }});
          t.$store.dispatch("getEmployeeTypeRecord",{param:{customParam:{person_id:t.editId}},success:function(data){
            t.typeRecord = data.maps;
          }});
          t.$store.dispatch("getEmployeeStatusRecord",{param:{customParam:{person_id:t.editId}},success:function(data){
            t.statusRecord = data.maps;
          }});
        }

      },
      getTableData:function (postData) {
        var t = this;
        t.$store.dispatch('getMetaDataTableData',{param:postData,success:(data)=>{
          t.$set(t.tabTableDataObj,postData.infoSetId,data);
          t.$set(t.tabTableData,postData.infoSetId,data.maps);
          t.$set(t.tabTablePageData,postData.infoSetId,data.pb);
        }});
      },
      editItem:function (type,infoSetId,columnEdit,data) {
        var t = this;
        if(type == 'add'){
          for(var i in data){
            data[i] ="";
          }
        }

        t.formOption = {
          formData:{columnEdit:columnEdit,data:data},
          formType:type,
          formInfoSetId:infoSetId,
          navigationCondition:t.navigationCondition,
          editCondition:t.editCondition
        }
        t.formModal = true;
      },
      showDelModal:function(infoSetId,uuid,deleteType){
        var t = this;
        var param ={
          infoSetId:infoSetId,
          uuidLists:[uuid],
          editCondition:t.navigationCondition.editCondition
        }
        t.$confirm('Confirm delete the item?', 'Delete', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
          }).then(() => {
            t.deleteItem(param,deleteType);
          }).catch(() => {

        });
      },
      deleteItem:function (param,deleteType) {
        var t = this;
        t.$store.dispatch('del',{param:param,success:function(){
          t.$message({
            message: 'Delete Success',
            type: 'success'
          });
          //删除的是table，则只刷新表格数据
          if(deleteType == "table"){
            t.getTableData(t.postData[param.infoSetId]);
          }else{
           t.changeTab(t.activeIndex,true);
          }

        }});
      },

      tableChangePage:function(pageNo){
        var t = this;
        setTimeout(function(){
          var postData = Object.assign({},t.postData[t.currentTableId]);
          postData.pageBean.pageNo = pageNo;
          t.postData[t.currentTableId] = postData;
          t.getTableData(postData);
        },0)
      },
      setCurrentTableId:function(id){
        this.currentTableId = id;
      },
      tableSelectChange:function(selection){

      },
      downloadAttachment:function(infoSetId,file_real_name,file_url){
       window.location.href='/route/'+infoSetId+'/downfilelog.do?fileName='+file_url+'&fileRealName='+file_real_name
      },
      /*============**
      <!--上传附件开始-->
      **=============*/

      //上传附件
      addUpload:function () {
        var t = this;
        console.log( t.uploadAttachmentData)
        t.uploadModal = true;
      },
      uploadAttachmentData:function(){

      },
      uploadAttachmentPreview:function(){

      },
      uploadAttachmentRemove:function(){

      },
      uploadAttachmentSuccess:function(response, file, fileList){
        this.$message({
          message:"upload Success",
          type:'success'
        })
        this.updateTab();
      },
      uploadAttachmentError:function(){

      },
      /*============**
      <!--上传附件结束-->
      **=============*/

      //上传头像
      uploadHeader:function(){
        var t = this;
        t.headerCropperOption = {
          fileFormName:"headImg",
          url:'/person/uploadPersonHeadImg.do',
          params:{personId:t.editId}
        }
        t.showImgCropper = true;
      },
      uploadHeaderSuccess:function(data){
        if(data.result=="true"){
           this.$message({
              message:'upload header image success',
              type:'success'
           })
           this.initBaseInfo();
           this.$emit('update')
        }
      },
      initBaseInfo:function () {
        //获取基本信息
        var t = this;
        this.$store.dispatch('getEditDataAndColumn',
          {
            param:{
              infoSetId:this.editTemplates.mainTemplateId,
              editCondition:{key:t.editTemplates.editConditionKey,value:t.editId}
            },
            success:(data)=>{
              t.baseData = data.beans[0];
            }
          }
         );
      },
      updateTab:function(){
        this.initBaseInfo();
        this.changeTab(this.activeIndex,true);
      }
    },
    props:{
      editOption:{
        type:Object,
        default:function(){
          return {
            editId:'',
            editTemplates:[],
            navigationCondition:{},
            editCondition:{},
            index:null
          }
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  @import "../../assets/css/variable";
  .edit_info{
    position: relative;
    width: 100%;
    height: 100%;
    .base_info_content{
      padding: 0 20px;
      max-height: 200px;
      overflow-y: auto;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 20px;
      //个人头像
      .img_content{
        width: 116px;
        height: 116px;
        float: left;
        position: relative;
        border: 1px #DDDDDD solid;
        padding: 8px;
        box-sizing: border-box;
        margin-right: 20px;
        cursor: pointer;
        &:hover{
          .edit_header_icon{
            display: block;
          }
        }
        .edit_header_icon{
          position: absolute;
          left:8px;
          top:8px;
          width: 100px;
          height: 100px;
          line-height: 100px;
          font-size: 30px;
          color: $activeColor;
          text-align: center;
          background-color: rgba(0,0,0,.5);
          display: none;
        }
        img{
          width: 100px;
          height: 100px;
          box-sizing: border-box;
          border: 1px #DDDDDD solid;
          position: relative;
          top: -1px;
          left: -1px;
        }
      }
      .base_group_line{
        width: 50%;
        float: left;
        line-height: 26px;
        padding: 0 12px;
        box-sizing: border-box;
        .key,.value{
          display: inline-block;
        }
        .value{
          padding-left: 8px;
        }
      }
    }

    .tab_panel{
      .tab_list{
        position: relative;
        z-index: 9;
        line-height: 40px;
        border-radius: 4px 4px 0 0;
        border-bottom: 1px #ddd solid;
        padding:0 20px ;
        .tab_item{
          display: inline-block;
          padding: 0 16px;
          text-align: center;
          cursor: pointer;
          border-radius: 5px 5px 0 0;
          &:hover{
            color: $activeColor;
          }
          &.active{
            border-top: 3px $activeColor solid;
            background-color: #fff;
            z-index: 10;
            box-shadow: 8px 0px 13px rgba(0, 0, 0, 0.1);
            border-bottom: 1px #fff solid;
            position: relative;
            top: 1px;
            border-right: 1px #ddd solid;
            border-left: 1px #ddd solid;
          }
        }
      }
      .tab_content{
        padding: 10px 20px;
        height: 510px;
        overflow: auto;
        position: relative;
        &.active{
          display: block;
        }
        .show_mode_list{
          .list_line{
            width: 50%;
            float: left;
            line-height: 32px;
            padding: 0 12px;
            box-sizing: border-box;
            .key,.value{
              display: inline-block;
            }
            .key{
              font-weight: bold;
              width: 220px;
            }
            .value{
              padding-left: 8px;
            }
          }
        }
        .tab_content_item{
          border: 1px transparent solid;
          &:hover{
            /*border: 1px #ddd solid;*/
          }
          .person_status{
            line-height: 30px;
            .person_status_item{
              padding-left: 12px;
              &.edit{
                .edit_icon{
                  display: none;
                  margin-left: 50px;
                  .iconfont{
                    display: inline-block;
                    padding: 0 12px;
                    vertical-align: middle;
                    border-radius: 20px;
                    &:hover{
                      color: $activeColor;
                    }
                  }
                }
                &:hover {
                  cursor: pointer;
                  background-color: #ddd;
                  .edit_icon{
                    display: inline-block;
                  }
                }
              }
            }
          }
        }
        .show_mode_express{
          .show_mode_express_item{
            position: relative;
            line-height: 40px;
            padding: 0 60px 0 12px;
            .edit_btn_group{
              position: absolute;
              right: 12px;
              top:0;
              .iconfont{
                color: #999;
                padding-left: 8px;
                cursor: pointer;
                display: none;
                &:hover{
                  color: $activeColor;
                }
              }
            }
            &:hover{
              .edit_btn_group{
                .iconfont{
                  display: inline-block;
                }
              }
            }
          }
        }
      }

    }
    .item_title{
      border-bottom: 1px #efefef solid;
      position: relative;
      font-weight: bold;
      padding: 0 12px;
      margin-bottom: 10px;
      min-height: 20px;
      &.border0{
        border: 0;
      }
      .title_name{
        display: inline-block;
        width: 150px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px $activeColor solid;
      }
      .edit{
        color: #999;
        cursor: pointer;
        &:hover{
          color: $activeColor;
        }
      }
      /* &:after{
         content:"";
         position: absolute;
         left:0;
         bottom:0;
         width: 150px;
         height: 1px;
         background-color: $activeColor;
       }*/
    }
  }
  .modal_table{
    width: 100%;
    border-top: 1px #DDDDDD solid ;
    border-right: 1px #DDDDDD solid ;
    td,th{
      border-left: 1px #DDDDDD solid ;
      border-bottom: 1px #DDDDDD solid ;
      text-align: center;
      line-height: 40px;
    }

  }

  .upLoad_panel{
    padding: 20px;
  }

</style>
